<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>


<!-- ListAqui fica os Graficos listados... -->
<g:each in="${chartDataSets}" var="chartDataSet">
    <g:if test="${chartDataSet?.type == 'pie' || chartDataSet?.type == 'bar'}">
        <script type="text/javascript">
            
            // Load the Visualization API and the piechart package.
            google.load('visualization', '1.0', {'packages':['corechart']});
            
            // Set a callback to run when the Google Visualization API is loaded.
            google.setOnLoadCallback(drawChart);
            
            // Callback that creates and populates a data table,
            // instantiates the pie chart, passes in the data and
            // draws it.
            function drawChart() {
                
                // Create the data table.
                var data = new google.visualization.DataTable();
                // create columns
                <g:each in="${chartDataSet.cols}" var="col">data.addColumn(<%="'${col.format}'"%>, <%="'${col.name}'"%>);
                </g:each>// create rows
                var rows = []; // declares rows[]
                <g:each in="${chartDataSet.rows}" var="row">rows.push([<g:each var="i" in="${ (0..<row.size) }"><g:if test="${i==0}">'<%= "${row[i]}" %>'</g:if><g:else>, <%= "${row[i]}" %></g:else></g:each>]); // pushes a row of data
                </g:each>data.addRows(rows); // add the rows[]

                // Set chart options
                var options = {
                    'title':<%="'${chartDataSet.title}'"%>,
                    'width':<%="'${chartDataSet.size.width}'"%>,
                    'height':<%="'${chartDataSet.size.height}'"%>,
                    chartArea: {width: '60%', height: '80%'},
                    is3D: true
                };

                // Instantiate and draw our chart, passing in some options.
            <g:if test="${chartDataSet?.type == 'bar'}">
                var chart = new google.visualization.BarChart(
            </g:if>
            <g:elseif test="${chartDataSet?.type == 'pie'}">
                var chart = new google.visualization.PieChart(
            </g:elseif>
                    document.getElementById('<%=chartDataSet.name%>'));
                chart.draw(data, options);
            }
        </script>

        <!--Div that will hold the <%= chartDataSet.type %> chart-->
        <div id="<%= chartDataSet.name %>" class="chart <%= chartDataSet.type %>"></div>

    </g:if>
    <g:elseif test="${chartDataSet?.type == 'table'}">
        <div class="chart table" style="
            width:<%=chartDataSet.size.width%>px;
            height:<%=chartDataSet.size.height%>px;
            background:white;">
            <p class="title"><b><%="${chartDataSet.title}"%></b></p>
            <table>
                <g:each in="${chartDataSet.rows}" var="row">
                    <tr>
                        <th><%= "${row[0]}" %></th>
                        <td><%= "${row[1]}" %></td>
                    </tr>
                </g:each>
            </table>
        </div>
    </g:elseif>
</g:each>
